<template>
	<view class="index">
		<u-toast ref="uToast"></u-toast>
		<view class="tab">
			<view class="tab_item" :class="index == tabIndex ? 'active' : ''" v-for="(item, index) in tabList" @click="handleTab(index)">
				{{item.title}}
			</view>
		</view>
		<view v-if="tabIndex == 0" class="tablist_pending_orders">
			<view class="item" v-for="(item, index) in pageList">
				<view class="" @click="pending_order_btn(item)">
					<view class="item_top">
						<img style="width: 45rpx; height: 45rpx;" src="@/static/img/clock.png" alt="" />
						<view style="margin: 0rpx 20rpx;">
							<span style="color: #C2A344;">15分钟</span>内送达
						</view>
						<view style="color: #9E9E9E;">
							{{formattedTime(dateToString(item.createTime))}}前送达
						</view>
					</view>
					<view class="item_qu">
						<view style="width: 45rpx; height: 45rpx; text-align: center; line-height: 45rpx; background-color: #E40000; color: #fff; border-radius: 50%;">
							取
						</view>
						<view style="margin: 0rpx 20rpx;">
							{{item.barArea}}
						</view>
					</view>
					<view class="item_switch">
						<img style="width: 45rpx; height: 45rpx;" src="@/static/img/switch.png" alt="" >
						<view style="margin: 0rpx 20rpx;">
							相距{{item.distance}}
						</view>
					</view>
					<view class="item_song">
						<view style="width: 45rpx; height: 45rpx; text-align: center; line-height: 45rpx; background-color: #CB9E13; color: #fff; border-radius: 50%;">
							送
						</view>
						<view style="margin: 0rpx 20rpx;">
							{{item.userAddrVO.addr}}
						</view>
					</view>
				</view>
				<view class="item_btn" @click="btnOrderUpdate(item)">
					抢单
				</view>
			</view>
		</view>
		<view v-if="tabIndex == 1" class="tablist_awaiting_pickup">
			<view class="item" v-for="(item, index) in pageList" :key="index" @click="received_order_btn(item)">
				<view class="item_top">
					<view style="display: flex; align-items: center;">
						<img style="width: 45rpx; height: 45rpx;" src="@/static/img/clock.png" alt="" />
						<view style="margin: 0rpx 20rpx;">
							<span style="color: #C2A344;">15分钟</span>内送达
						</view>
						<view style="color: #9E9E9E;">
							{{formattedTime(dateToString(item.createTime))}}前送达
						</view>
					</view>
					<view class="">
						取货码：<span style="color: #2188FC;">{{item.num}}</span>
					</view>
				</view>
				<view class="item_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" :src="item.barSpuVO.mainImgUrl" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{item.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{item.count}}</span>
						</view>
					</view>
				</view>
				<view class="item_qu">
					<view style="width: 45rpx; height: 45rpx; text-align: center; line-height: 45rpx; background-color: #E40000; color: #fff; border-radius: 50%;">
						取
					</view>
					<view style="margin: 0rpx 20rpx;">
						{{item.barArea}}
					</view>
				</view>
				<view class="item_switch">
					<img style="width: 45rpx; height: 45rpx;" src="@/static/img/switch.png" alt="" >
					<view style="margin: 0rpx 20rpx;">
						相距{{item.distance}}
					</view>
				</view>
				<view class="item_song">
					<view style="width: 45rpx; height: 45rpx; text-align: center; line-height: 45rpx; background-color: #CB9E13; color: #fff; border-radius: 50%;">
						送
					</view>
					<view style="margin: 0rpx 20rpx;">
						{{item.userAddrVO.addr}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="tabIndex == 2" class="tablist_delivery">
			<view class="item" v-for="(item, index) in pageList" :key="index" @click="received_order_btn(item)">
				<view class="item_top">
					<view style="display: flex; align-items: center;">
						<img style="width: 45rpx; height: 45rpx;" src="@/static/img/clock.png" alt="" />
						<view style="margin: 0rpx 20rpx;">
							<span style="color: #C2A344;">15分钟</span>内送达
						</view>
						<view style="color: #9E9E9E;">
							{{formattedTime(dateToString(item.createTime))}}前送达
						</view>
					</view>
					<view style="color: #E40000;">
						00:02.03
					</view>
				</view>
				<view class="item_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" :src="item.barSpuVO.mainImgUrl" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{item.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{item.count}}</span>
						</view>
					</view>
				</view>
				<view class="item_song">
					<view style="width: 45rpx; height: 45rpx; text-align: center; line-height: 45rpx; background-color: #CB9E13; color: #fff; border-radius: 50%;">
						送
					</view>
					<view style="margin: 0rpx 20rpx;">
						{{item.userAddrVO.addr}}
					</view>
				</view>
				<view style="margin: 0px 62rpx;">
					<span style="margin-right: 20rpx;">{{item.userAddrVO.consignee}}</span><span>{{item.userAddrVO.mobile}}</span>
				</view>
			</view>
		</view>
		<view v-if="tabIndex == 3" class="tablist_complete">
			<view class="item" v-for="(item, index) in pageList" :key="index" @click="complete_order_btn(item)">
				<view class="item_top">
					<view style="display: flex; align-items: center;">
						<view style="color: #B48D17;">
							准时
						</view>
						<view style="margin: 0rpx 20rpx;">
							{{item.createTime}}-{{item.updateTime}}
						</view>
					</view>
				</view>
				<view class="item_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" :src="item.barSpuVO.mainImgUrl" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{item.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{item.count}}</span>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<span style="margin-right: 20rpx;">收益金额：</span><span>¥{{item.reward}}</span>
				</view>
			</view>
		</view>
		<view v-if="pageList.length == 0 || load" style="position: relative; height: 60vh;">
			<view style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
				<u-empty
					mode="history"
					text='暂无数据'
					width="300px"
					height="300px"
					iconSize='120px'
					textSize='25px'
					class="asd"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import { barRiderOrderPage, riderAcceptById, getByUserId } from '@/api/user.js'
	export default {
		data() {
			return {
				tabList: [{ title: '待接单' }, {title: '待取货'}, {title: '配送中'}, {title: '已完成'}],
				pageList: [],
				total: 0,
				tabIndex: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 6,
				},
				load: false,
				userInfo: {},
			}
		},
		onLoad(options) {
			this.tabIndex = options.tabIndex || 0
			this.getUser();
			setTimeout(() => {
				this.getPage();
			}, 1000)
		},
		onShow() {
			this.getPage();
		},
		onPullDownRefresh() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 6,
			},
			this.getPage();  
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			// 判断当前页是否大于等于总页数
			const totalPagestotal = this.total / this.queryParams.pageSize
			if (totalPagestotal <= this.queryParams.pageNum) {
				uni.$u.toast('没有更多数据啦')
			} else {
				this.queryParams.pageNum++;
				this.getPage();   // 每次滑动请求接口，实现上拉加载更多数据
			}
		},
		methods: {
			dateToString(d) {
				let date = new Date(d);     //1. js获取当前时间
				let min = date.getMinutes();  //2. 获取当前分钟
				date.setMinutes(min + 15);  //3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数
				let year = date.getFullYear();
				let month = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
				let day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
				let hours = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
				let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
				let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
				let formatDate = year + '-' + month + '-' + day + " " + hours + ":" + minutes + ":" + seconds;
				return formatDate;
			},
			getUser() {
				getByUserId().then(res => {
					this.userInfo = res.data
				})
			},
			formattedTime(time) {
				const [datePart, timePart] = time.split(' ');
				const [hours, minutes] = timePart.split(':');
				return `${hours}:${minutes}`;
			},
			getPage(record) {
				this.load = true
				barRiderOrderPage({ status: this.tabIndex, ...this.queryParams, ...record }).then(res => {
					this.pageList = res.data.list
					this.total = res.data.total
					this.load = false
				})
			},
			handleTab(index) {
				this.tabIndex = index
				if(this.tabIndex != 0) {
					this.getPage({ riderId: this.userInfo.riderId })
				} else {
					this.getPage()
				}
				
			},
			btnOrderUpdate(data) {
				riderAcceptById({barRiderOrderId: data.riderOrderId}).then(res=>{
					if(res.code == '00000') {
						this.$refs.uToast.show({
							type: 'success',
							message: '您已成功接单，请尽快送达',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						setTimeout(() => {
							this.getPage()
						},2000)
					}
				})
			},
			pending_order_btn(item) {
				uni.navigateTo({
					url: `/pages/pending-orders/index?id=${item.riderOrderId}`
				})
			},
			received_order_btn(item) {
				uni.navigateTo({
					url: `/pages/received-orders/index?tabIndex=${this.tabIndex}&id=${item.riderOrderId}`
				})
			},
			complete_order_btn(item) {
				uni.navigateTo({
					url: `/pages/complete-orders/index?id=${item.riderOrderId}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index{
		padding: 20rpx;
		.tab{
			height: 60rpx;
			display: flex;
			justify-content: space-between;
		}
		.tablist_pending_orders{
			font-size: 26rpx;
			.item{
				margin: 20rpx 0;
				padding: 20rpx;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgb(149, 149, 149);
				.item_top{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_qu{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_switch{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_song{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_btn{
					color: #fff;
					text-align: center;
					background-color: #1984FC;
					padding: 20rpx 0;
					border-radius: 8rpx;
					margin-top: 12rpx;
				}
			}
		}
		.tablist_awaiting_pickup{
			font-size: 26rpx;
			.item{
				margin: 20rpx 0;
				padding: 20rpx;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgb(149, 149, 149);
				.item_top{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
					justify-content: space-between;
				}
				.item_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
				.item_qu{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_switch{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
				.item_song{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
			}
		}
		.tablist_delivery{
			font-size: 26rpx;
			.item{
				margin: 20rpx 0;
				padding: 20rpx;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgb(149, 149, 149);
				.item_top{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
					justify-content: space-between;
				}
				.item_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
				.item_song{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
				}
			}
		}
		.tablist_complete{
			font-size: 26rpx;
			.item{
				margin: 20rpx 0;
				padding: 20rpx;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgb(149, 149, 149);
				.item_top{
					display: flex;
					align-items: center;
					padding: 12rpx 0;
					justify-content: space-between;
				}
				.item_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
			}
		}
		.active{
			color: #1684FC;
			border-bottom: 4rpx solid #1684FC;
			padding-bottom: 10rpx;
		}
	}
</style>
